<template>
	<view class="user-list">
		<view class="search-bar">
			<uni-data-select v-model="searchParams.role" :localdata="roleOptions" placeholder="用户角色"
				@change="handleSearch" />
			<uni-data-select v-model="searchParams.status" :localdata="statusOptions" placeholder="用户状态"
				@change="handleSearch" />
		</view>

		<uni-card v-for="user in users" :key="user.id" :title="user.username" :extra="getRoleText(user.role)"
			@click="goToDetail(user.id)">
			<view class="user-info">
				<view class="info-row">
					<text class="label">邮箱：</text>
					<text class="value">{{user.email}}</text>
				</view>
				<view class="info-row">
					<text class="label">手机：</text>
					<text class="value">{{user.phone}}</text>
				</view>
				<view class="info-row">
					<text class="label">状态：</text>
					<text class="value" :class="{'warning': user.status === 0}">
						{{getStatusText(user.status)}}
					</text>
				</view>
				<view class="info-row">
					<text class="label">创建时间：</text>
					<text class="value">{{user.createdAt}}</text>
				</view>
			</view>

			<template v-slot:actions>
				<view class="actions">
					<button class="action-btn" @click.stop="toggleStatus(user.id, user.status)"
						:class="{'disabled': user.status === 0}">
						{{user.status === 1 ? '禁用' : '启用'}}
					</button>
					<button class="action-btn" @click.stop="goToEdit(user.id)">
						编辑
					</button>
					<button class="action-btn delete" @click.stop="handleDelete(user.id)">
						删除
					</button>
				</view>
			</template>
		</uni-card>

		<uni-fab :pattern="fabPattern" :content="fabContent" horizontal="right" vertical="bottom"
			@trigger="handleFabClick" />
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request';

	export default {
		data() {
			return {
				users: [],
				searchParams: {
					role: '',
					status: ''
				},
				roleOptions: [{
						value: '',
						text: '全部角色'
					},
					{
						value: 'ADMIN',
						text: '管理员'
					},
					{
						value: 'MAINTAINER',
						text: '维护人员'
					},
					{
						value: 'USER',
						text: '普通用户'
					}
				],
				statusOptions: [{
						value: '',
						text: '全部状态'
					},
					{
						value: 1,
						text: '正常'
					},
					{
						value: 0,
						text: '禁用'
					}
				],
				fabPattern: {
					color: '#007AFF',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				fabContent: [{
					iconPath: '/static/plus.png',
					selectedIconPath: '/static/plus.png',
					text: '新增用户',
					active: false
				}]
			};
		},

		onShow() {
			this.loadUsers();
		},

		methods: {
			async loadUsers() {
				try {
					const res = await request({
						url: '/api/users',
						// data: this.searchParams
					});
					this.users = res;
				} catch (err) {
					uni.showToast({
						title: '加载用户列表失败',
						icon: 'none'
					});
				}
			},

			handleSearch() {
				this.loadUsers();
			},

			getRoleText(role) {
				const roleMap = {
					'ADMIN': '管理员',
					'MAINTAINER': '维护人员',
					'USER': '普通用户'
				};
				return roleMap[role] || role;
			},

			getStatusText(status) {
				return status === 1 ? '正常' : '已禁用';
			},

			async toggleStatus(id, currentStatus) {
				try {
					await request({
						url: `/api/users/${id}/status`,
						method: 'PUT',
						data: {
							status: currentStatus === 1 ? 0 : 1
						}
					});

					uni.showToast({
						title: '状态更新成功',
						icon: 'success'
					});

					this.loadUsers();
				} catch (err) {
					uni.showToast({
						title: '状态更新失败',
						icon: 'none'
					});
				}
			},

			async handleDelete(id) {
				uni.showModal({
					title: '确认删除',
					content: '是否确认删除该用户？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await request({
									url: `/api/users/${id}`,
									method: 'DELETE'
								});

								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});

								this.loadUsers();
							} catch (err) {
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/user/detail/index?id=${id}`
				});
			},

			goToEdit(id) {
				uni.navigateTo({
					url: `/pages/user/edit/index?id=${id}`
				});
			},

			handleFabClick() {
				uni.navigateTo({
					url: '/pages/user/create/index'
				});
			}
		}
	};
</script>

<style>
	.user-list {
		padding: 15px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		gap: 10px;
	}

	.user-info {
		padding: 10px 0;
	}

	.info-row {
		display: flex;
		margin-bottom: 8px;
	}

	.label {
		color: #666;
		width: 80px;
		flex-shrink: 0;
	}

	.value {
		flex: 1;
	}

	.warning {
		color: #ff3b30;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
	}

	.action-btn {
		font-size: 14px;
		padding: 4px 12px;
		border-radius: 4px;
		background-color: #007AFF;
		color: #fff;
	}

	.action-btn.disabled {
		background-color: #4cd964;
	}

	.action-btn.delete {
		background-color: #ff3b30;
	}
</style>